<script lang="ts" setup>
import type { NavigationMenuItem } from '@nuxt/ui'

const layout = useLayoutStore()

const expandedNavigationItem = useState<string>()

const sidebarExpanded = defineModel<boolean>({ required: true })

const items = computed<NavigationMenuItem[]>(() =>
  layout.topLinks.map((item, index) => ({
    ...item,
    open: expandedNavigationItem.value === `item-${index}`,
    children: item.children?.map(child => ({
      ...child,
      onSelect() {
        layout.isMaxSm && (sidebarExpanded.value = false)
      }
    }))
  }))
)
</script>

<template>
  <div class="flex flex-1 flex-col gap-1.5">
    <UNavigationMenu
      v-model="expandedNavigationItem"
      :items
      :collapsed="!(layout.isMaxSm || sidebarExpanded)"
      orientation="vertical"
      type="single"
      popover
    />
    <UNavigationMenu :items="layout.bottomLinks" orientation="vertical" class="mt-auto" />
  </div>
</template>
